<template>
  <div id="tou">
    <header id="BlogHeader">
      <div class="nav">
        <router-link to="/list" id="menu_btn" class="target menu_btn">
          <i class="el-icon-s-home"></i>
          <span>首页</span>
        </router-link>
        <form class="search-form" autocomplete="off" @submit.prevent="onSubmit">
          <input
            type="text"
            v-model="search"
            placeholder="请输入你要搜索的关键字"
            class="searchW"
            @keyup.enter="seek"
          />
<!--          <el-button class="searchB" type="submit" icon="el-icon-search">搜索</el-button>-->
          <input class="searchB" type="submit" value="搜索" />
          <div class="search_cat" @click="seek">
          </div>
        </form>
      </div>
    </header>
  </div>
</template>
<script>
export default {
  name: "tou",
  data() {
    return {
      search: "",
    };
  },
  methods: {
    onSubmit() {
      return false;
    },
    seek() {
      if(this.search)
      {
          this.$router.push({ path: "/list", query: { search: this.search } });
          this.search=""
      }
    }
  }
};
</script>
<style scoped>
a {
  color: #000;
}
.search-form {
  width: 33%;
}
@media screen and (max-width: 800px) {
  .man {
    display: none;
  }
  header .target {
    margin-left: 5px;
  }
  .searchW {
    margin-left: 0px;
  }
  .search-form {
    width: 250px;
  }
  .search_cat {
    left: 157px;
  }
}
</style>
